<template>
  <ul class="f-flex control">
    <li class="item">
      <svg-icon icon-class="settings_news" class-name="icon" />
      <router-link to="/personnel-manage/personnel">
        <span>进入主平台</span>
      </router-link>
    </li>
    <li class="item">
      <svg-icon icon-class="settings_news" class-name="icon" />
      <span class="news">
        消息
        <i class="badge">3</i>
      </span>
    </li>
    <!-- 我的信息 -->
    <li class="item">
      <svg-icon icon-class="settings_user" class-name="icon" />
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ $t('settings.user') }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>我的信息</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>

  </ul>
</template>

<script>
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import { mapGetters } from 'vuex'
export default {
  name: 'Navbar',
  components: {
    Hamburger,
    LangSelect
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    // 切换主题
    theme(type) {
      localStorage.setItem('skin', type)
      window.document.documentElement.setAttribute('data-theme', type)
    },
    // 退出登录
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$store.commit('routers/SET_ASYNCROUTES', [])
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      // window.location.href = `/login?redirect=${this.$route.fullPath}`
    }
  }
}
</script>

<style lang="scss" scoped>
.control {
  .item {
    padding: 0 10px;
    height: 20px;
    border-left: 1px solid #ebeef5;
    color: #fff;
    cursor: pointer;
    .icon {
      margin-right: 5px;
      font-size: 18px;
      color: #fff;
    }
    .el-dropdown-link {
      color: #fff;
    }
    .news {
      position: relative;
      .badge {
        position: absolute;
        right: -5px;
        top: -15px;
        background-color: #f56c6c;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        text-align: center;
        white-space: nowrap;
        border: 1px solid #fff;
      }
    }
  }
  .item:first-child {
    border: none;
  }
}
</style>
